<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>注册</title>
    <link rel="icon" href="/img/login.jpg" type="img/x-ico" />
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/signin.css" rel="stylesheet">
    <script src="/js/jquery.js"></script>
</head>
<body class="text-center">
<!--  用户登录form表单 -->
<form class="form-signin">
    <img class="mb-4" src="/img/login.jpg" width="100" height="100">
    <h1 class="h3 mb-3 font-weight-normal" >请注册</h1>
    <div>
        <span style="float: left;width: 25%;font-size: 25px;margin: 10px auto;text-align: right;">邮箱:</span>
        <input  style="float: right;width: 72%;" type="text" class="form-control"
                              placeholder="请输入邮箱地址" required="" autofocus="" id="email">
    </div>
    <div style="margin-top: 90px;">
        <span style="float: left;width: 25%;font-size: 25px;margin: 9px auto;text-align: right;">验证码:</span>
        <input type="button" value="获取验证码" style="width: 25%;float: right;height: 45px;margin: 5px auto;color: #11EEEE;background: none;border: none;cursor: pointer;"
               onclick="getCode(this)" id="getValCode"/>
        <input style="float: right;width: 48%;" type="text" class="form-control"
                              placeholder="请输入验证码" required="" autofocus="" id="code">
    </div>
    <div style="margin-top: 160px;">
        <span style="float: left;width: 25%;font-size: 25px;margin: 10px auto;text-align: right;">密码:</span>
        <input style="float: right;width: 72%;" type="password" class="form-control"
               placeholder="请输入密码" required="" id="password">
    </div>
    <div style="margin-top: 230px;">
        <span style="float: left;width: 25%;font-size: 25px;margin: 10px auto;text-align: right;">确认密码:</span>
        <input style="float: right;width: 72%;" type="password" class="form-control"
               placeholder="请再次输入密码" required="" id="confirmPassword">
    </div>
    <input type="button" value="注册"  style="float: right;width: 72%;" class="btn btn-lg btn-primary btn-block" onclick="registry()" />

    <input  type="button" class="form-control" style="color: #00BB00;background: none;border: none;cursor: pointer;font-size: 22px;"
            value="去登录"  onclick="goLogin()">

</form>
</body>

<script>
    console.log('document.cookie6666 >>>>>>>>>>>>',document.cookie);
    function registry() {
        var email = $("#email").val();
        var code = $("#code").val();
        var password = $("#password").val();
        var confirmPassword = $("#confirmPassword").val();
        if(!email){
            alert("请输入邮箱");
            return;
        }
        if(!code){
            alert("请输入验证码");
            return;
        }
        if(!password || !confirmPassword){
            alert("请输入密码");
            return;
        }
        if(password != confirmPassword){
            alert("两次输入密码不一致");
            return;
        }
        $.ajax({
            url:"http://www.test.com/api/user/register/" + email + "/" + password + "/" + code,
            type:"GET" ,
            success:function (data) {
                console.log('*********** 注册返回 **********',data);
                if(data.code == 0){
                    console.log('注册成功 >>>>>>>>>>>>>')
                    window.location.href = "welcome.html"
                }else{
                    alert(data.msg)
                }
            },
            error:function (err) {
                console.log(err);
                alert(err.responseText)
            }
        });
    };


    let countdown = 60;        //初始值
    function setTime(val) {
        if (countdown == 0) {
            document.getElementById("getValCode").style.color = '#11EEEE';
            document.getElementById("getValCode").style.cursor = 'pointer';
            val.removeAttribute("disabled");
            val.value="获取验证码";
            countdown = 10;
            return false;
        } else {
            document.getElementById("getValCode").style.color = '#808080';
            document.getElementById("getValCode").style.cursor = 'not-allowed';
            val.setAttribute("disabled", true);
            val.value="重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function() {   //设置一个定时器，每秒刷新一次
            setTime(val);
        },1000);
    }


    function getCode(val) {
        let email = $("#email").val();
        if(!email){
            alert("请输入邮箱");
            return;
        }
        setTime(val);
        $.ajax({
            url:"http://www.test.com/api/code/create/" + email,
            type:"GET" ,
            success:function (data) {
                console.log("发送验证码返回：",data);
                let result  = JSON.parse(data);
                if(result.code == 0){
                    alert("发送成功，请去邮箱查看验证码！");
                }else{
                    alert(result.msg)
                }
            },
            error:function (err) {
                console.log(err);
                alert(err.responseText);
            },
            dataType:"text"
        });
    }


    function goLogin() {
        window.location.href = "login.html"
    }
    // test();
    function test() {

        $.ajax({
            url:"http://www.test.com:18088/test" ,
            type:"GET" ,
            success:function (data) {
                console.log(data);
                // alert(data);
            },
            error:function (err) {
                console.log(err);
                alert(err.responseText)
            },
            dataType:"text"
        });
    }
</script>


</html>